<template>
  <view class="f-tabbar-box" :style="{ background: tabbarBg }">
    <view class="f-tabbar">
      <view v-for="item in tabbarList" :key="item.page" class="f-tabbar-item" @click="_changeTabbar(item)">
        <slot :name="`tabbar_index_${item.page}`">
          <view class="f-tabbar__icon">
            <image
              class="f-tabbar__icon__img"
              :src="currentIndex == item.page ? item.selectedIconPath : item.iconPath"
              :mode="item.selectedIconPath ? 'aspectFill' : 'widthFix'" />
          </view>
          <view class="f-tabbar__label" :style="{ color: currentIndex == item.page ? selectedTextColor : textColor }">
            {{ item.text }}
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { requireFile } from '@/utils'

const props = defineProps({
  // 当前选择下标，默认0开始
  current: {
    type: [Number, String],
    default: 0,
  },
  tabbarList: {
    type: Array,
    default: () => [],
  },
  tabbarBg: {
    type: String,
    default: '#ffffff',
  },
  textColor: {
    type: String,
    default: '#666671',
  },
  selectedTextColor: {
    type: String,
    default: '#1a7dff',
  },
})

const emits = defineEmits(['update:current', 'change'])

const currentIndex = computed(() => props.current)

// 自动填充路径
const padFirstSymbol = (str, smb) => {
  if (str.startsWith(smb) || str.startsWith('http')) {
    return str
  }
  return `/${str}`
}

const _changeTabbar = (item) => {
  if (item.page == currentIndex.value) {
    return false
  }

  emits('update:current', item.page)
  emits('change', item)
}

onMounted(() => {})
</script>

<style lang="scss">
.f-tabbar-box {
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: 40rpx;
  border-radius: 50rpx;
  padding: 10rpx;
  z-index: 9999;
  box-shadow: 0px 0px 6px 0px #e5e5e5;
  .f-tabbar {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    .f-tabbar-item {
      display: flex;
      flex: 1;
      align-items: center;
      .f-tabbar__icon {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 6rpx;
        position: relative;
        &__img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .f-tabbar__label {
        font-size: 24rpx;
      }
    }
  }
}
</style>
